<template>
  <page-view class="user-page">
    <div class="content">
      <div class="top">
        <svg class="icon left_icon" aria-hidden="true">
          <use xlink:href="#icon-liebiao"></use>
        </svg>
        <svg class="icon right_icon" aria-hidden="true">
          <use xlink:href="#icon-sousuo"></use>
        </svg>
      </div>
      <div class="userInfo">
        <div class="login" v-if="$store.state.isLogin">
          <div class="avatar">
            <img
              :src="$store.state.userInfo.avatarUrl"
              alt=""
              style="
                width: 100%;
                height: 100%;
                border-radius: 50%;
                vertical-align: middle;
              "
            />
          </div>
          <div class="userName">{{ $store.state.userInfo.nickname }}</div>
        </div>
        <div
          class="login"
          v-if="!$store.state.isLogin"
          @click="$router.push({ name: 'Login' })"
        >
          <div class="avatar">
            <img
              src="@/assets/image/login_avatar.png"
              alt=""
              style="object-fit: contain; height: 100%; width: 100%"
            />
          </div>
          <div class="userName">登录/注册</div>
        </div>

        <div class="setting" @click="$router.push({ name: 'Setting' })">
          <icon name="setting-o" size="25" class="icon" />
        </div>
        <div class="alarm">
          <icon name="bullhorn-o" size="25" class="icon"></icon>
        </div>
      </div>

      <div class="property">
        <div class="property_top font_one">我的</div>
        <div class="property_content">
          <div class="property_item">
            <svg class="icon icon_Mine" aria-hidden="true">
              <use xlink:href="#icon-playCircle"></use>
            </svg>
            <p class="font_icon_four">最近播放</p>
          </div>
          <div class="property_item">
            <svg class="icon icon_Mine" aria-hidden="true">
              <use xlink:href="#icon-xiazai"></use>
            </svg>
            <p class="font_icon_four">本地/下载</p>
          </div>
          <div class="property_item">
            <svg class="icon icon_Mine" aria-hidden="true">
              <use xlink:href="#icon-shangchuanyunpan"></use>
            </svg>
            <p class="font_icon_four">云盘</p>
          </div>
          <div class="property_item">
            <svg class="icon icon_Mine" aria-hidden="true">
              <use xlink:href="#icon-yigou"></use>
            </svg>
            <p class="font_icon_four">已购</p>
          </div>

          <div class="property_item">
            <svg class="icon icon_Mine" aria-hidden="true">
              <use xlink:href="#icon-wodehaoyou"></use>
            </svg>
            <p class="font_icon_four">我的好友</p>
          </div>
          <div class="property_item">
            <svg class="icon icon_Mine" aria-hidden="true">
              <use xlink:href="#icon-shoucang1"></use>
            </svg>
            <p class="font_icon_four">收藏和赞</p>
          </div>
          <div class="property_item">
            <svg class="icon icon_Mine" aria-hidden="true">
              <use xlink:href="#icon-radioguangbo"></use>
            </svg>
            <p class="font_icon_four">我的播客</p>
          </div>
          <div class="property_item">
            <svg class="icon icon_Mine" aria-hidden="true">
              <use xlink:href="#icon-yinle"></use>
            </svg>
            <p class="font_icon_four">音乐罐子</p>
          </div>
        </div>
      </div>
      <div class="collect">
        <div class="collect_top font_one">我的收藏</div>
        <div class="collect_content">
          <div class="collect_left">暂无收藏，添加收藏更快找到你的歌~</div>
          <div class="collect_right">
            <Button
              icon="plus"
              type="primary"
              size="small"
              style="border-radius: 5px"
              color="linear-gradient(to right, #ff6034, #ee0a24)"
              >添加收藏</Button
            >
          </div>
        </div>
      </div>
    </div>
  </page-view>
</template>

<script>
import { Icon, Button, Tag } from "vant";
export default {
  name: "Mine",
  components: { Icon, Button, Tag },
  setup() {
    let userName = "小宇宙47746";

    return { userName };
  },
};
</script>

<style lang="less" scoped>
// 加粗字体 ：开通会员你预计 的资产、我的收藏、红包/胜券、代金券
.font_one {
  font-size: 16px;
  font-weight: bold;
}
// 灰色浅色字体 ：个未使用、暂无收藏、
.font_two {
  font-size: 12px;
  color: rgb(157, 158, 160);
}

.content {
  width: 100%;
  background-color: rgb(242, 242, 242);
  display: flex;
  flex-flow: row wrap;
  overflow: auto;
  & > div {
    width: 6.5rem;
    margin: 7px auto;
    padding: 5px 10px;
    // background-color: yellow;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    box-sizing: border-box;
  }
  .top {
    background-color: rgb(242, 242, 242);
    height: 50px;
    display: flex;
    justify-content: space-between;
    .icon{
      width: 30px;
    }
  }
  .userInfo {
    height: 70px;
    margin-top: unset;
    border-radius: unset;
    // background-color: unset;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    & > div {
      height: 100%;
    }
    .login {
      width: 240px;
      //   border: 1px solid black;
      display: flex;
      align-items: center;
      .avatar {
        width: 60px;
        height: 60px;
        background-color: red;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10px;
        // border: 1px solid black;
      }
      .userName {
        flex: 1;
        line-height: 70px;
        font-size: 20px;
        font-weight: bold;
        // border: 1px solid black;
      }
    }

    .setting {
      width: 40px;
      height: 40px;
      text-align: center;
      // border: 1px solid black;
      .icon {
        line-height: 40px;
      }
    }
    .alarm {
      width: 40px;
      height: 40px;
      text-align: center;
      // border: 1px solid black;
      .icon {
        line-height: 40px;
      }
    }
  }
  .property {
    // height: 160px;
    .property_top {
      padding: 5px 0px;

      // border: 1px solid black;
    }
    .property_content {
      //   height: 120px;
      // border: 1px solid black;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-evenly;
      align-items: center;
      .property_item {
        margin-top: 10px;
        width: 65px;
        height: 65px;
        text-align: center;
        line-height: 106px;
        // border: 1px solid black;
        position: relative;
        .icon_Mine {
          width: 30px;
          height: 30px;
          position: absolute;
          top: 35%;
          left: 50%;
          transform: translate(-50%, -50%);
          // border: 1px solid black;
        }
      }
    }
  }
  .collect {
    // height: 90px;
    .collect_top {
      padding: 5px 0px;
    }
    .collect_content {
      // height: 120px;
      display: flex;
      flex-flow: row;
      align-items: center;
      .collect_left {
        width: 70%;
        // border: 1px solid black;
      }
      .collect_right {
        width: 30%;
      }
    }
  }
  .wallet {
    // height: 120px;
    position: relative;
    .wallet_top {
      padding: 5px 0px;
    }
    .enter_wallet {
      position: absolute;
      top: 10px;
      right: 20px;
    }

    .wallet_content {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-evenly;
      align-items: center;
      .wallet_item {
        // width: 28%;
        padding: 0 10px;
        // border: 1px solid black;
        p {
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>